<template>
	<div class="edit-h5">
		<main class="edit-h5-main">
			<header class="edit-h5-header">
				<aside class="left">
					<h3>加群方式</h3>
				</aside>
				<span class="close" @click="close('joinOption')">{{
          TUITranslateService.t(`关闭`)
        }}</span>
			</header>
			<div class="notification">
				<view @tap.stop="choose(item)" v-for="(item,index) in range" :key="index"
					style="height: 110rpx;padding:0 24rpx;"
					class="action-item-box fs-28 select-item flex flex-y-center">
					<view class="flex-1 text-hidden " style="text-align: center;">{{item.text}}</view>
				</view>
			</div>
		</main>
	</div>
</template>

<script lang="ts" setup>
	import { nextTick } from '../../../adapter-vue';
	import {
		TUITranslateService,
		TUIGroupService,
		IGroupModel,
	} from '@tencentcloud/chat-uikit-engine';
	import { watchEffect, ref } from '../../../adapter-vue';
	import { Toast, TOAST_TYPE } from '../../common/Toast/index';
	import { isUniFrameWork } from '../../../utils/env';

	const props = defineProps({
		data: {
			type: Object,
			default: () => ({}),
		},
	});

	const groupProfile = ref<IGroupModel>({});
	const isEdit = ref(false);

	watchEffect(() => {
		groupProfile.value = props.data;
	});

	const emits = defineEmits(['update', 'close']);

	const range = ref([
		{ value: 'FreeAccess', text: "自由加入" },
		{ value: 'NeedPermission', text: "需要验证" }
	]);


	const choose = (e) => {
		emits('update', { key: 'joinOption', value: e.value });
		emits('close', e);
		Toast({
			message: '修改成功',
		});
	};

	const close = () => {
		emits('close');
	};
</script>

<style lang="scss" scoped>
	@import "../../../assets/styles/common";

	.action-item-box {
		background-color: #FFF;
		transition: all 0.25s;
	}

	.action-item-box:active {
		background-color: #f4f4f4;
	}

	.notification {
		flex: 1;
		padding: 20px;
		display: flex;
		flex-direction: column;
		word-break: break-all;

		.row {
			flex: 1;
			font-size: 14px;

			.row-p {
				text-align: center;
				padding-bottom: 20px;
			}
		}

		.textarea {
			margin-bottom: 20px;
			box-sizing: border-box;
			padding: 10px;
			border: 1px solid #e8e8e9;
			resize: none;
			font-size: 14px;
			height: 100%;
		}

		.uni-height {
			height: 8vh;
		}

		.footer {
			display: flex;
			justify-content: flex-end;
			padding: 20px 10px;
		}
	}

	.btn {
		background: #3370ff;
		border: 0 solid #2f80ed;
		padding: 4px 28px;
		font-weight: 400;
		font-size: 12px;
		color: #fff;
		line-height: 24px;
		border-radius: 4px;

		&-cancel {
			background: #fff;
			border: 1px solid #ddd;
			color: #828282;
		}
	}

	.edit-h5 {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: flex-end;
		z-index: 1;

		.edit-h5-main {
			background: #fff;
			flex: 1;
			padding: 18px;
			border-radius: 12px 12px 0 0;
			width: 80vw;
		}

		&-header {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.close {
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 18px;
				color: #3370ff;
				letter-spacing: 0;
				line-height: 27px;
			}
		}

		&-footer {
			display: flex;

			.btn {
				flex: 1;
				border: none;
				background: #147aff;
				border-radius: 5px;
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 16px;
				color: #fff;
				letter-spacing: 0;
				line-height: 27px;
				padding: 8px 0;

				&:disabled {
					opacity: 0.3;
				}
			}
		}
	}
</style>